<template>
	<view class="all">
		<view class="eval" v-if="getAppraise.length > 0">
			<u-subsection :list="list" :current="curNow" @change="sectionChange" activeColor="#c00000"></u-subsection>
			<view class="" v-for="(item,index) in appraiseList" :key="index">
				<view class="evalicon" v-if="!item.anonymity">
					<u-avatar :src="userinfo.avatarUrl" :show-sex="true" sex-icon="man"> </u-avatar>
					<view class="itemsec">
						<view class="evaltext">{{userinfo.nickName }}</view>
						<u-rate v-model="item.rate" :value="item.rate" :readonly="true" :colors="colors" :icons="icons"
							inactive-icon="thumb-up"></u-rate>
					</view>
				</view>

				<view class="evalicon" v-else>
					<u-avatar src="#" :show-sex="true" sex-icon="man"></u-avatar>
					<view class="itemsec">
						<view class="evaltext">匿名</view>
						<u-rate v-model="item.rate" :value="item.rate" :readonly="true" :colors="colors" :icons="icons"
							inactive-icon="thumb-up"></u-rate>
					</view>
				</view>

				<view class="evalstet">
					<text style="color: #c00000;">评价：</text>
					<text>{{item.eval}}</text>
				</view>
				<view class="evalstet-imgall">
					<view class="evalstet-img" v-for="(srcItem,index_src) in item.src" :key="index_src"
						@click="preview(item.src)">
						<image mode="aspectFit" :src="srcItem"></image>
					</view>
				</view>
				<view class="" style="height: 10px;background-color: #eeeeef;margin-top: 20px;"></view>
			</view>
			<view class="" style="height: 40px;background-color: white;width: 100%;"></view>
		</view>

		<myEmpty v-if="getAppraise.length == 0" mode="comment" :windowHeight="50" :IfShowBut='true' IfShowText='去评价'
			@clickBnt='clickBnt'>
		</myEmpty>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		name: "evaluate",
		props: ["good"],
		data() {
			return {
				love: [],
				list: ['全部', '好评', '差评', "有图", "无图"],
				curNow: 0,
				value: 1,
				colors: ['#ffc454', '#ffb409', '#ff9500'],
				icons: ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'],
				appraiseList: []
			};
		},
		mounted() {
			this.sectionChange(0)
		},
		computed: {
			...mapGetters("rechargeComments", ["getAppraise"]),
			...mapState("login", ["userinfo"]),
		},
		methods: {
			// 实现轮播图的预览效果
			preview(item) {
				uni.previewImage({
					current: item[0], //  // 预览时，默认显示图片的索引
					urls: item // // 所有图片 url 地址的数组
				})
			},
			sectionChange(index) {
				this.curNow = index;
				switch (this.curNow) {
					case 0:
						this.appraiseList = this.getAppraise
						break;
					case 1:
						this.appraiseList = this.getAppraise.filter(item => item.rate >= 3)
						break;
					case 2:
						this.appraiseList = this.getAppraise.filter(item => item.rate < 3)
						break;
					case 3:
						this.appraiseList = this.getAppraise.filter(item => item.src.length > 0)
						break;
					case 4:
						this.appraiseList = this.getAppraise.filter(item => item.src.length == 0)
						break;;
				}
			},
			//跳转评价
			clickBnt(val) {
				let good = {
					goods_id: this.good.goods_id,
					goods_name: this.good.goods_name,
					goods_small_logo: this.good.goods_small_logo,
					goods_price: this.good.goods_price
				}
				uni.navigateTo({
					url: "/subCustomer/appraise/appraise?good=" + JSON.stringify(good)
				})
			},

		},
	}
</script>

<style lang="scss">
	.all {


		.eval {
			width: 100%;

			height: 200px;

			.evalstet-imgall {
				display: flex;
				flex-wrap: wrap;

				.evalstet-img {

					image {
						width: 70px;
						height: 70px;
						padding-left: 10px;
						margin-top: 10px;
					}
				}
			}

			.evalicon {
				display: flex;
				height: 50px;
				background-color: #f8f9f9;
				margin-top: 50rpx;
				padding-left: 10px;

				.itemsec {
					margin-left: 10px;
				}
			}

			.evalstet {
				padding-left: 50px;

				font-size: 28rpx;
			}

			.evaltext {
				display: flex;
				align-items: center;
				padding-bottom: 10rpx;
				padding-left: 5px;

			}
		}

	}
</style>